import { Carousel } from 'antd-mobile';
import React, { Component } from 'react'
import { getHomeSwiper } from '../../../api/index'
// import { Flex } from 'antd-mobile';
import styles from '../index.module.scss'
import {getCurrentCity } from '../../../utils/baiduMap'
import SearchBar from '../../../components/SearchBar'
// import axios from 'axios';
export default class CarouseiExample extends Component {
  state = {
    // 轮播图状态数据
    swipers:[],
    cityName:'广州',
    areValue:''  // 这个是对应地址名称的code码
  }
  async componentDidMount(){
    this.getHomeSwipers()
        // 调用封装的百度地图数据
        const res = await getCurrentCity()
        console.log('我是定位',res);
        this.props.callback(res.value)
        this.setState({
          cityName:res.label
        })
       
  }
  // 轮播图
  async getHomeSwipers() {
    const rse1 = await getHomeSwiper()
    // const res  = await axios.get('http://localhost:8080/home/swiper')
    this.setState({
      swipers: rse1.data.body
    })
    // console.log(this.state.swipers);
  }
  // 渲染轮播图结构
  renderSwipers(){
    return this.state.swipers.map(item => (
      <a
        key={item.id}
        href="http://itcast.cn"
        style={{ display: 'inline-block', width: '100%',height :212}}
      >
        <img
          src= {`http://localhost:8080${item.imgSrc}`}
          alt=""
          style={{ width: '100%', verticalAlign: 'top' }}
        />
      </a>
    ))
  }
  render() {
        // 从状态中解构出需要用到的数据
        const {  cityName } = this.state
    return (
      <div>
        <Carousel autoplay infinite>
          {this.renderSwipers()}
        </Carousel>
        {/* 搜索开始 */}
        <div className={styles.searchBox}>
          {/*  左侧白色区域*/}
           <SearchBar cityName={cityName}/>
        </div>       
      </div>
    );
  }
}